<script setup lang="ts">
import { formatDateTime } from "@/common/utils/datetime.ts"
import { getActivityListApi, deleteActivityDataApi } from "@@/apis/activity"
import { ChatDotSquare, Edit, Pointer, Position, Refresh, Search } from "@element-plus/icons-vue"
import { onMounted, watch, ref } from "vue"
import { getToken } from "@@/utils/cache/cookies"
import { usePagination } from "@@/composables/usePagination"

defineOptions({
  name: "List",
  inheritAttrs: false
})

const router = useRouter()
const listData = ref([])
const { paginationData, handleCurrentChange, handleSizeChange } = usePagination()

function handleQuery() {
  const params = {
    page: paginationData.currentPage,
    page_size: paginationData.pageSize,
  }
  getActivityListApi(params).then((res) => {
    if (res.data && res.data.list) {
      listData.value = res.data.list
      paginationData.total = res.data.total
    }
  })
}

function getDetails(row) {
  router.push({
    path: "/activity/details",
    query: { id: row.activity_id }
  })
}

function editActivity(row) {
  router.push({
    path: "/activity/operate",
    query: { id: row.activity_id }
  })
}

function reviewComments(row) {
  router.push({
    path: "/activity/review",
    query: { id: row.activity_id }
  })
}

function addActivity() {
  router.push({
    path: "/activity/operate"
  })
}

function share(row) {
  const baseUrl = window.location.origin // 获取当前域名的基本 URL（协议 + 域名 + 端口）
  const fullPath = `${baseUrl}${"/dist/#/h5?id="}${row.activity_id}` // 拼接完整的路由路径
  // 使用 window.open 在新标签页中打开该 URL
  window.open(fullPath, "_blank")
}

function updateActivity() {
  handleQuery()
}

function deleteActivity(row) {
  ElMessageBox.confirm(`正在删除本条活动，确认删除？`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    const token = getToken()
    const params = {
      activity_id: row.activity_id,
      token
    }
    deleteActivityDataApi(params).then(() => {
      ElMessage.success("删除成功")
      handleQuery()
    })
  })
}

onMounted(() => {
  handleQuery()
})

// 监听分页参数的变化
watch([() => paginationData.currentPage, () => paginationData.pageSize], handleQuery, { immediate: true })
</script>

<template>
  <div class="app-container">
    <el-card shadow="never" class="search-wrapper">
      <el-button type="primary" :icon="Search" @click="addActivity()">
        创建活动
      </el-button>
      <el-button :icon="Refresh" @click="updateActivity()">
        更新活动
      </el-button>
    </el-card>
    <el-card>
      <el-space direction="vertical" class="interval active-space" style="align-items: start">
        <div class="card-item" v-for="(item, index) in listData" :key="index">
          <h2 class="link-cursor" @click="getDetails(item)">
            <el-text line-clamp="1" size="large">
              {{ item.title }}
            </el-text>
          </h2>
          <div class="item-content link-cursor" @click="getDetails(item)">
            <div class="cont-photo" v-if="item !== 3 ">
              <el-image style="width: 100px; height: 100px" :src="item.image" fit="fill" />
            </div>
            <div class="cont-main">
              <el-text line-clamp="5">
                <!-- {{ item.content }} -->
                <div v-html="item.content" />
              </el-text>
            </div>
          </div>
          <div class="item-foot">
            <div class="foot-operate">
              <!-- <el-button type="primary" :icon="Pointer" text bg>
                点赞<span class="ml-1">1999</span>
              </el-button> -->
              <el-button type="primary" :icon="ChatDotSquare" link @click="reviewComments(item)">
                <span class="mr-1">{{ item.pending_approval_total }}</span>条待审核评论
              </el-button>
              <el-button type="primary" :icon="Position" link @click="share(item)">
                分享
              </el-button>
              <el-button type="primary" :icon="Edit" link @click="editActivity(item)">
                编辑
              </el-button>
              <el-button type="danger" link @click="deleteActivity(item)">
                删除
              </el-button>
            </div>
            <el-text type="info">
              <span class="mr-5">发布人：{{ item.admin_id }}</span>
              <span>发布时间：{{ formatDateTime(item.createtime * 1000) }}</span>
            </el-text>
          </div>
        </div>
      </el-space>
      <div class="pager-wrapper">
        <el-pagination
          background
          :layout="paginationData.layout"
          :page-sizes="paginationData.pageSizes"
          :total="paginationData.total"
          :page-size="paginationData.pageSize"
          :current-page="paginationData.currentPage"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
.app-container {
  padding: 15px;
  .search-wrapper {
    margin-bottom: 15px;
    text-align: right;
    :deep(.el-card__body) {
      // padding-bottom: 2px;
    }
  }
  .interval {
    width: 100%;
    margin-bottom: 15px;
  }
  .card-item {
    border-bottom: 1px solid #eeeeee;
    .link-cursor {
      cursor: pointer;
    }
    .item-content {
      display: flex;
      margin-bottom: 15px;
      .cont-photo {
        margin-right: 15px;
      }
      .cont-main {
        max-width: 100%;
        overflow: auto;
      }

    }
    .item-foot {
      margin-bottom: 15px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
}
.pager-wrapper {
  display: flex;
  justify-content: flex-end;
}
</style>
